<template>
    <div>
        <h1>API Test</h1>
        <div v-if="data">
            <p>ID: {{ data.id }}</p>
            <p>Message: {{ data.message }}</p>
            <p>Message: {{ data.status }}</p>
            <p>Message: {{ data.name }}</p>
            <p>Message: {{ data.age }}</p>
            <p>Message: {{ data.sex }}</p>
            <p>{{ msg }}</p>
        </div>
        <div v-else>
            <p>Loading...</p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
// import { base_url } from "@/../config.ts"
interface ApiResponse {
    id: number;
    message: string;
    status: string;
    name: String;
    age: String;
    sex: String;
}
interface userInfoResponse {
    userid: number;
    username: string;
}
export default defineComponent({
    name: 'ApiTest',
    setup() {
        const data = ref<ApiResponse | null>(null);
        const msg = ref<ApiResponse | null>(null);
        const userInfo = ref<ApiResponse | null>(null);
            const userInfoh = ref<userInfoResponse | null>(null);

        // 调用后端接口
        const fetchData = async () => {
            try {
                const response = await axios.get<ApiResponse>('/api/test');
                data.value = response.data;
                console.log(response, 'data');

            } catch (error) {
                console.error('Error fetching API:', error);
            }
        };
        // 调用后端接口
        const fetchAdd = async () => {
            try {
                const response = await axios.post<ApiResponse>('/api/add');
                msg.value = response.data;
                console.log(response, 'add');

            } catch (error) {
                console.error('Error fetching API:', error);
            }
        };
        const getData = async () => {
            try {
                const response = await axios.get<ApiResponse>('/user/info', {
                    params: {
                        userid: "123",
                        username: "皇兄"
                    }
                });
                userInfo.value = response.data
                console.log(userInfo.value, 'useInfo');
            } catch (error) {
                console.error('Error fetching API:', error);
            }
        };
        const getDatah = async () => {
            try {
                const response = await axios.get<userInfoResponse>('/user/info', {
                    params: {
                        userid: 456,
                        username: "皇子"
                    }

                });
                userInfoh.value = response.data
                console.log(userInfo.value, 'useInfo');
            } catch (error) {
                console.error('Error fetching API:', error);
            }
        };
        onMounted(() => {
            fetchData();
            fetchAdd();
            getData()
            getDatah()
        });

        return {
            data, msg, userInfo
        };
    },
});
</script>

<style scoped>
h1 {
    color: #42b983;
}
</style>
